<template>


	<view class="bj1">
		<view v-for="(item, index) in list" :key="index">


			<view class="immediate-wrap-card-top-msg disCenter" style="margin: 12rpx 0 4rpx 8rpx;">
				<view>
					<image class="timeImg" src="@/static/createRate/time.png"></image>
				</view>
				<text class="immediate-wrap-card-top-time">{{ item.time }}</text>
			</view>


			<view class="immediate-wrap-card dis">
				<view class="immediate-wrap-card-top dis">
					<view class="immediate-wrap-card-top-msg disCenter">
						<image :src="item.icon" mode=""></image>
						<text class="immediate-wrap-card-top-tit">{{ item.name }}</text>
					</view>
					<view>
						<text class="immediate-wrap-card-top-tag" v-for="(itemm, idx) in item.label.split(',')"
							:key="idx">{{ itemm }}</text>
					</view>
				</view>

				<view class="immediate-wrap-card-center dis">
					<view class="immediate-wrap-card-center-left">
						<view class="immediate-wrap-card-center-left-top">可借额度（元）</view>
						<view class="immediate-wrap-card-center-left-bot">{{ item.quotaUpper }}</view>
					</view>

					<view class="immediate-wrap-card-center-right">
						<view class="immediate-wrap-card-center-right-top">期数（月）</view>
						<view class="immediate-wrap-card-center-right-btm disCenter">
							{{ item.usefulLife.replace(/.*-/, "") }}
							<text style="margin-left: 4rpx;color: #333;font-weight: 500;font-size: 26rpx;">个月</text>
						</view>
					</view>

					<view class="immediate-wrap-card-center-right">
						<view class="immediate-wrap-card-center-right-btn" @click="loginclick">立即申请</view>
					</view>
				</view>
			</view>

		</view>
	</view>

</template>

<script>
	export default {

		data() {
			return {
				list: [{
						icon: '../../static/duihao.png',
						name: '闪电借款',
						label: '额度高,放款快,无抵押',
						quotaUpper: '20000',
						quotaLower: '1000',
						usefulLife: '3-12',
						personCount: 5234,
						time: '2025-05025 13:24'
					},
					{
						icon: '../../static/duihao.png',
						name: '小额贷',
						label: '利率低,门槛低,极速到账',
						quotaUpper: '10000',
						quotaLower: '500',
						usefulLife: '6-24',
						personCount: 3129,
						time: '2025-05025 13:24'
					},
					{
						icon: '../../static/duihao.png',
						name: '信用贷',
						label: '信用良好即可,无担保',
						quotaUpper: '50000',
						quotaLower: '5000',
						usefulLife: '12-36',
						personCount: 7621,
						time: '2025-05025 13:24'
					},
					{
						icon: '../../static/duihao.png',
						name: '信用贷',
						label: '信用良好即可,无担保',
						quotaUpper: '50000',
						quotaLower: '5000',
						usefulLife: '12-36',
						personCount: 7621,
						time: '2025-05025 13:24'
					},
					{
						icon: '../../static/duihao.png',
						name: '信用贷',
						label: '信用良好即可,无担保',
						quotaUpper: '50000',
						quotaLower: '5000',
						usefulLife: '12-36',
						personCount: 7621,
						time: '2025-05025 13:24'
					},
					{
						icon: '../../static/duihao.png',
						name: '信用贷',
						label: '信用良好即可,无担保',
						quotaUpper: '50000',
						quotaLower: '5000',
						usefulLife: '12-36',
						personCount: 7621,
						time: '2025-05025 13:24'
					}
				]
			}
		},
		methods: {
			loginclick() {
				uni.navigateTo({
					url: '/pagesB/createRating/repay'
				});
			},
			
			handleFilter() {
				console.log("执行筛选操作");
				// 执行搜索条件
			},
			
		},
		onNavigationBarButtonTap(e) {
			if (e.index === 0) this.handleFilter();
		},

	}
</script>

<style lang="scss" scoped>
	.timeImg {
		width: 20rpx;
		height: 20rpx;
		padding-right: 10rpx;
		padding-bottom: 2rpx;
	}

	.immediate-wrap-card-top-time {
		width: 270rpx;
		height: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;

	}

	.bj1 {
		background-color: #F3F4F5;
		background-size: 100% 100%;
		padding: 24rpx 24rpx;
	}

	.immediate-wrap-card {
		// background-color: gray;
		// margin-bottom: 70rpx;

		.immediate-wrap-card-center {

			.immediate-wrap-card-center-right {
				text-align: center;
				// background-color: #fff;

				.immediate-wrap-card-center-right-top {

					margin-bottom: 18rpx;
					font-size: 23rpx;
					font-weight: 500;
					color: #333;
				}

				.immediate-wrap-card-center-right-btn {
					color: #fff;
					padding: 14rpx 30rpx;
					text-align: center;
					background: linear-gradient(90deg, #6CB0F2 0%, #3C75F2 100%);
					box-shadow: 0rpx 8rpx 29rpx 0rpx #B2CBEA;
					border-radius: 100rpx;
					font-size: 26rpx;

				}

				.immediate-wrap-card-center-right-btm1 {
					display: flex;
					font-size: 24rpx;
					align-items: center;

					.immediate-wrap-card-center-right-btm1-tit {
						color: #FF0000;
					}

					image {
						width: 20rpx;
						height: 24rpx;
						vertical-align: middle;
						margin-right: 10rpx;
					}

				}

				.immediate-wrap-card-center-right-btm {
					font-family: DIN Alternate, DIN Alternate;
					font-weight: 500;
					font-size: 38rpx;

				}
			}

			.immediate-wrap-card-center-left {
				.immediate-wrap-card-center-left-top {
					font-size: 24rpx;
					color: #333;
					font-weight: 500;
					margin-bottom: 18rpx;
				}

				.immediate-wrap-card-center-left-bot {
					font-size: 40rpx;
					font-family: DIN Alternate, DIN Alternate;
					font-weight: 500;
					color: #333;

				}
			}

			// margin: 12rpx 0 8rpx 0;
			border-top: 2rpx solid rgba(0, 0, 0, 0.09);
			align-items: center;
			justify-content: space-between;
			padding-top: 24rpx;
		}




		.immediate-wrap-card-top {
			align-items: center;
			justify-content: space-between;

			.immediate-wrap-card-top-msg {
				margin: 6rpx 0 10rpx 14rpx;
			}


			.immediate-wrap-card-top-tit {
				color: #333;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 550;
			}


			.immediate-wrap-card-top-tag {
				color: #FF6936;
				background: #FFF2DD;
				padding: 4rpx 16rpx;
				font-size: 22rpx;
				margin-left: 16rpx;
				border-radius: 4rpx;
				border-radius: 4rpx;
			}

			image {
				width: 62rpx;
				height: 62rpx;
				margin-right: 12rpx;
				border-radius: 16rpx;
			}
		}

		position: relative;
		flex-direction: column;
		border-radius: 20rpx;
		margin:0 0 24rpx 0;
		padding: 16rpx;
		justify-content: space-between;
		background: #fff;
		margin-bottom: 15rpx;

	}

	.disCenter {
		display: flex;
		align-items: center;
	}

	.custom-navbar {
		height: 44px;
		padding: 0 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		border-bottom: 1px solid #ccc;
		/* 适配状态栏的话，需要加上状态栏高度 */
		padding-top: env(safe-area-inset-top);
		box-sizing: border-box;
	}

	.left,
	.right {
		font-size: 16px;
		color: #007AFF;
	}

	.title {
		font-weight: bold;
		font-size: 18px;
	}
</style>